<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/hw-admin.css">
    <title>表单筛选</title>
</head>
<body>
    <div class="hw-iframe">

        <!-- 顶部标题 -->
        <div class="hw-header-wrapper">
            <div class="hw-header">
                <div class="hw-header__item--left">
                    modal框演示
                </div> 
            </div>
        </div>

        <div class="hw-btn-group">
            <button class="hw-btn--default" id="alert-btn">alert</button>
            <button class="hw-btn--normal" id="confirm-btn1">confirm</button> 
            <button class="hw-btn--normal" id="confirm-btn2">confirm带title</button>
            <button class="hw-btn--normal" id="confirm-btn3">confirm不带title</button>
            <button class="hw-btn--hover" id="modal-btn" data-toggle="modal" data-target="#img-modal"> modal </button>
        </div>
    </div>


    <div class="modal hide" id="img-modal">
        <div class="modal-mask"></div>
        <div class="modal-content">
            <div class="modal-header">
                <i class="iconfont" data-dismiss="modal">&#xe63d;</i>
                <div class="modal-title">提示</div>
            </div>
            <div class="modal-body">
                这是一段信息
            </div>
            <div class="modal-footer">
                <button class="hw-btn--normal" data-dismiss="modal">确定</button>
                <button class="hw-btn--default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</body>
</html> 
<script src="../static/lib/jquery-1.12.4.min.js"></script>
<script src="../static/lib/common/util.js"></script> 
<script src="../static/lib/common/common.js"></script>
<script type="text/javascript">
    $('#alert-btn').click(function() { 
        $.alert('你是一个好人')
    });

    $('#confirm-btn1').click(function() { 
        $.confirm('你是一个好人')
    });

    $('#confirm-btn2').click(function() { 
        $.confirm({
            modalClass: 'confirm-modal-common2',
            title: 'confirm-btn2',
            msg: '确定关闭？',
            cancelText: '取消',
            confirmText: '确定',
            cancel: function() {
                $.alert('你点了取消')
            },
            confirm: function() {
                $.alert('你点了确定')
            }
        })
    });

    $('#confirm-btn3').click(function() { 
        $.confirm({
            modalClass: 'confirm-modal-common3',
            title: 'confirm-btn3',
            msg: '确定关闭？',
            cancelText: '取消',
            confirmText: '确定',
            cancel: function() {
                $.alert('你点了取消')
            },
            confirm: function() {
                $.alert('你点了确定')
            }
        })
    });
 
    
</script>